<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx语法规则</title>
    <style>
      .title{
        background-color: #000;
        width: 200px;
      }
    </style>
</head>
<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">  
      const myId = 'sanysan'
      const myData = 'Hello, React' 

      //1.创建虚拟DOM
      const VDOM = (
        <div>
          <h2 id={myId} className="title" style={{color:"#FFFFFF"}}>
            <span>{myData}</span>
          </h2>
        </div>
      )
      //2.渲染虚拟DOM到页面, render(虚拟DOM, 容器)
      ReactDOM.render(VDOM,document.getElementById('test'))
      /*
          jsx语法规则：
            1.定义虚拟dom时，不要写引号
            2.标签中混入js表达式时要用{}
            3.样式的类名指定不要用class，要用className
            4.内联样式，要用style={{key: value}}的形式去写
            5.只能有一个根标签 
            6.虚拟dom标签必须闭合
            7.标签首字母
              （1）若是小写字母开头，则将该标签转换为html中的同名标签，若html中无该标签对应的同名元素，则报错
              （2）若大写字母开头，recat就去渲染对应的组件，若没有该组件，则报错
      */
    </script>
</body>
</html>